/*
	历史数据磁盘使用量图
*/
define(
	[
		'require',
		'echarts',
		'echarts/chart/bar',
		'zrender/tool/util'
	],
	function (require) {
		"use strict";

		var echarts = require('echarts');
		var zrUtil = require('zrender/tool/util');

		var forEach = Ember.EnumerableUtils.forEach;
		var bar = Ember.EnumerableUtils.bar;

		var defaultOption = {
			    title : {
			        text: '磁盘容量和使用量',
			        subtext: '统计数据'
			    },
			    tooltip : {
			    	trigger: 'axis'
			    },
			    legend: {
			        data:['磁盘容量','使用量']
			    },
			    grid: {
					x: 200,
					y: 40,
					x2: 200,
					y2: 5,
					borderWidth: 1
				},
				xAxis : [
						{
						type : 'category',
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false,
							//标签的间隔决定了分割线的间隔
							interval: 0,
							textStyle: {
								align: "left"
							}
						},
						axisTick: {
							show: false,
							interval: 3
						},
						splitLine : {
							show: true,
							lineStyle: {
								color: '#ffffff',
								type: 'solid',
								width: 1
							}
						},
						data : ['总容量 : 80','总容量 : 80','','','']
					}
				],
				yAxis : [
				    {
						type : 'value',
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine : {
							show:false
						}
					}
				],
				series : [
					{
					type:'bar',
					data: ['30','60'],
					name: "使用量",
					barCategoryGap: 2,
					itemStyle: {
						normal: {
							color: 'rgba(148,0,211,1)'
						}
					}
					}
				]
			};

		var BarView = Ember.Component.extend({
			dataKey: "apdex",

			didInsertElement: function(){
				var $dom = this.$();

				this.width = this.width||$dom.width();
				this.height = this.height||$dom.height();

				if(this.width === 0 || this.height === 0){
					Ember.assert("必须指定视图的width和height。（可通过样式或width，height属性");
					return;
				}

				this._initNormalChart();
			},

			/**
			 * 初始化概览图表
			 */
			_initNormalChart: function(){
				var $dom = this.$();

				if(G_vmlCanvasManager && G_vmlCanvasManager.init){
					G_vmlCanvasManager.initElement($dom[0]);
				}

				var overviewChart = echarts.init($dom[0]);
				overviewChart.setOption(defaultOption);
				//this.overviewChart = overviewChart;
				//this.detailDataChange();
			},

			/**
			 * 数据改变后, 根据显示模式设置为相应的数据
			 */
			dataChange: Ember.observer("data", function(){
				this.detailDataChange();
			}),

			/**
			 * 详细数据改变后, 刷新概览图表
			 */
			detailDataChange: function(){
				if(!this.overviewChart){
					return;
				}

				var option = zrUtil.clone(defaultOption);

				var data = this.get("data")||[];
				var xAxisData = option.xAxis[0].data = [];
				var seriesData = option.series[0].data = [];

				this._translateDataToOption(data, xAxisData, seriesData);

				this.overviewChart.setOption(option, true);
			},

			/**
			 * 将原始值转换为柱形图需要的series配置
			 */
			_translateSeriesDataItem: function(performance){
				var dataKey = this.get("dataKey");
				var value = performance[dataKey],
					valueItem = {
						value: value,
						origData: performance
					};
				return valueItem;
			},

			/**
			 * 将原始值转换为柱形图的xAxis配置
			 */
			_translateXAxisDataItem: function(performance){
				var xAxisData;
				xAxisData = (new Date(performance.timestamp)).toTimeString().substr(0, 5);
				return xAxisData;
			},

			/**
			 * 将原始值转换为柱形图的配置
			 */
			_translateDataToOption: function(data, xAxisData, seriesData){
				var view = this;
				forEach(data, function(performance){
					var valueItem = view._translateSeriesDataItem(performance);
					xAxisData.push(view._translateXAxisDataItem(performance));
					seriesData.push(valueItem);
				});
				if(xAxisData.length == 0){
					xAxisData.push("-");
				}
			}
		});

		APM.ui.Bar = BarView;

		return BarView;
	}
);